<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <%@include file="my_js_css/cssInclude.jsp" %>

    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <script src="${ctx}/static/my_css_js/js/jquery-1.10.2.min.js"></script>
    <script src="${ctx}/static/my_css_js/js/Echarts/echarts.js"></script>

</head>
<body>
<div class=" page-container sidebar-collapsed">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <!--menu-right-->
                <div class="top_menu" style="height: 80px; text-align: center;">
                    <span style="display: inline-block; line-height: 80px; font-size: 30px; font-weight: 600; color: #fff">
                         智慧旅游
                    </span>

                    <a style=" float: right; color: #fff; margin: 26px 23px 0 0; font-size: 19px;" class="tooltips"
                       href="/Tourism">
                        <i class="lnr lnr-power-switch"></i>
                    </a>


                    <div class="clearfix"></div>

                </div>
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <div class="outter-wp">
                <!--/sub-heard-part-->

                <!--/sub-heard-part-->
                <!--/inner-charts-->
                <div class="inner-charts clearfix">
                    <div class="col-md-8 ">
                        <h3 class="inner-tittle two">事件发生位置</h3>
                        <div class="graph">
                            <div id="container" class="form-control"
                                 style="width: 100%; height:400px; position: inherit;">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h3 class="inner-tittle two">事件完成率</h3>
                        <div class="graph">
                            <div id="main_2" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="stats-grid">
                            <div class="stats-head">
                                <h4 class="title3">组任务</h4>
                            </div>
                            <div class="stats-info graph">
                                <div class="stats">
                                    <ul class="list-unstyled">
                                        <c:forEach items="${GroupList}" var="list" varStatus="s" begin="1" end="6">
                                            <li>${list.object.event_title}
                                                <div class="text-success pull-right">${list.object.cdate}</div>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="stats-grid">
                            <div class="stats-head">
                                <h4 class="title3">个人任务</h4>
                            </div>
                            <div class="stats-info graph">
                                <div class="stats">
                                    <ul class="list-unstyled">
                                        <c:forEach items="${taskList}" var="list" varStatus="s" begin="1" end="6">
                                            <li>${list.object.event_title}
                                                <div class="text-success pull-right">${list.object.cdate}</div>
                                            </li>
                                        </c:forEach>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/inner-charts-->
            </div>

        </div>
    </div>
    <!--//content-inner-->
    <!--导航-->
    <div class="sidebar-menu">
        <header class="logo">
            <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
            <a href="# "> <span id="logo"> <h1>智慧旅游</h1></span> </a>
        </header>
        <div class="down">
            <a style="display: inline-block;">
                <img style="width: 58px; border: 3px solid #ddd; margin-top: -30px" src="http://202.97.207.34:8199/user.png">
            </a>
            <a style="display: inline-block; margin-left: 10px; text-align: left;">
                <span style="font-size: 15px; display: inline-block; margin-left: 9px;" class=" name-caret">${emp_name}</span><br />
                <p style="display: inline-block;" id="clock3"></p>
            </a>
        </div>
        <div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>

        <div class="menu">
            <ul id="menu">

                <li><a href="${ctx}/work/addEvent"><i class="lnr lnr-pencil"></i> <span>上报事件</span></a></li>
                <li><a href="${ctx}/work/zworkIndex"><i class="fa fa-file-text-o"></i> <span>组任务</span></a></li>
                <li><a href="${ctx}/work/gworkIndex"><i class="fa fa-file-text-o"></i> <span>个人任务</span></a></li>
                <li><a href="${ctx}/work/insertEvent"><i class="lnr lnr-pencil"></i> <span>提交事件流</span></a></li>
                <li><a href="${ctx}/work/queryAllEvent"><i class="lnr lnr-pencil"></i> <span>查询事件</span></a></li>
                <li id="menu-academico">
                    <a><i class="fa fa-table"></i> <span> 系统管理</span> <span class="fa fa-angle-right"
                                                                            style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li><a href="${ctx}/emp/empIndex">人员管理</a></li>
                        <li><a href="${ctx}/org/orgIndex">部门管理</a></li>
                        <li><a href="${ctx}/role/roleIndex">角色管理</a></li>
                        <li><a href="${ctx}/sys/grid">网格管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

<%@include file="my_js_css/jsInclude.jsp" %>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=a9cc973368bc35f8eae77052967ebcb1&callback=loadMap&plugin=AMap.PolyEditor,AMap.MouseTool,AMap.ToolBar"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
    var map;
    function loadMap(gridId) {
        map = new AMap.Map('container', {
            resizeEnable: true,
            center: [130.975966, 45.300046],
            zoom: 13
        });
        $.getJSON("${ctx}/work/zEvent", function (result) {
            $.each(result, function (idx, item) {
                var marker = new AMap.Marker({
                    map: map,
                    icon: new AMap.Icon({
                        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                        size: new AMap.Size(58, 30),
                        imageOffset: new AMap.Pixel(-0, -0)
                    }),
                    position: new AMap.LngLat(item.object.lng,item.object.lat),
                    offset: new AMap.Pixel(-5, -30)
                });
                marker.setAnimation('AMAP_ANIMATION_BOUNCE');
            })


        })
        //加点

        // AMap.event.addListener(map, 'click', getLnglat); //点击事件
    }
    function geocoder_CallBack(data) {
        console.log("ddd");
        var address;
        //返回地址描述
        address = data.regeocode.formattedAddress;
    }

    //鼠标点击，获取经纬度坐标
    function getLnglat(e) {
        map.clearMap();
        var x = e.lnglat.getLng();
        var y = e.lnglat.getLat();

        lnglatXY = new AMap.LngLat(130.975966,45.300046);
        geocoder();
    }
</script>
<script>
    var myChart2 = echarts.init(document.getElementById('main_2'));
    option = {
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },

        series : [
            {
                name: '速度',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 100,
                splitNumber: 1,
                radius: '60%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    backgroundColor: 'auto',
                    borderRadius: 2,
                    color: '#eee',
                    padding: 3,
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    textShadowColor: '#222'
                },
                title : {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic'
                },
                detail : {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    formatter: function (value) {
                        value = (value + '').split('.');
                        value.length < 2 && (value.push('00'));
                        return ('00' + value[0]).slice(-2)
                            + '.' + (value[1] + '00').slice(0, 2);
                    }
                },
                data:[{value: 87, name: '事件完成率'}]
            },
            {
                name: '转速',
                type: 'gauge',
                center: ['20%', '40%'],    // 默认全局居中
                radius: '50%',
                min:0,
                max:100,
                endAngle:45,
                splitNumber:1,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length:12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length:20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                },
                data:[{value: 90, name: '事件处置率'}]
            }
        ]
    };

    myChart2.setOption(option);


</script>
</body>
</html>
